<template>
  <div class="container">
    <headerBar
      :title="local.messageList"
      @changeLan="changeLan"
      @pageReturn="pageReturn"
      :isNoReturn="true"
    ></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}" style="width: 100%;">
      <div class="top">
        <div class style="width: 100%;">
          <div
            class
            style="display:flex;flex-direction: row;justify-content: space-between;align-content: center;width:100%;"
          >
            <div class style="display:flex;flex-direction: row;">
              <div class="msg-status">
                <div
                  class="a"
                  :id="0"
                  :class="[activeIndex === 0 ? 'msg_item_on' : '']"
                  @click="tabClick"
                >{{local.all}}</div>
                <div class="a">|</div>
                <div
                  class="a"
                  :id="1"
                  :class="[activeIndex === 1 ? 'msg_item_on' : '']"
                  @click="tabClick"
                >{{local.read}}</div>
                <div class="a">|</div>
                <div
                  class="a"
                  :id="2"
                  :class="[activeIndex === 2 ? 'msg_item_on' : '']"
                  @click="tabClick"
                >{{local.unread}}</div>
              </div>
            </div>
            <div @click="openDialogRight" class="a">{{local.selectTime}}</div>
          </div>
          <div>
            <div :hidden="activeIndex != 0">
              <template v-if="msgList.length == 0">
                <div class="stock-in-record nodata-wrap">
                  <img src="/static/style/block.png" class="nodata-img" />
                  <p class="nodata-txt">{{local.nodata}}</p>
                </div>
              </template>
              <div v-else>
                <div
                  class="msg-item-list"
                  @click="routerToUrl(`../../pages/msgDetail/index?id=${item.id}`)"
                  v-for="(item, index) in msgList"
                  :key="index"
                >
                  <div class="msg-item">
                    <div class="msg-title" v-if="item.message != null">{{item.message}}</div>
                    <div class="msg-content">
                      <!-- {{local.msgTip}}：{{item.goodsName}} -->
                      {{item.remark}}
                    </div>
                    <div class="msg-date">{{item.createTime}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class :hidden="activeIndex != 1">
              <template v-if="msgList.length == 0">
                <div class="stock-in-record nodata-wrap">
                  <img src="/static/style/block.png" class="nodata-img" />
                  <p class="nodata-txt">{{local.nodata}}</p>
                </div>
              </template>
              <div v-else>
                <div
                  class="msg-item-list"
                  @click="routerToUrl(`../../pages/msgDetail/index?id=${item.id}`)"
                  v-for="(item, index) in msgList"
                  :key="index"
                >
                  <div class="msg-item">
                    <div class="msg-title" v-if="item.message != null">{{item.message}}</div>
                    <div class="msg-content">
                      <!-- {{local.msgTip}}：{{item.goodsName}} -->
                      {{item.remark}}
                    </div>
                    <div class="msg-date">{{item.createTime}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class :hidden="activeIndex != 2">
              <template v-if="msgList.length == 0">
                <div class="stock-in-record nodata-wrap">
                  <img src="/static/style/block.png" class="nodata-img" />
                  <p class="nodata-txt">{{local.nodata}}</p>
                </div>
              </template>
              <div v-else>
                <div
                  class="msg-item-list"
                  @click="routerToUrl(`../../pages/msgDetail/index?id=${item.id}`)"
                  v-for="(item, index) in msgList"
                  :key="index"
                >
                  <div class="msg-item">
                    <div class="msg-title" v-if="item.message != null">{{item.message}}</div>
                    <div class="msg-content">
                      <!-- {{local.msgTip}}：{{item.goodsName}} -->
                      {{item.remark}}
                    </div>
                    <div class="msg-date">{{item.createTime}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息列表筛选条件 -->
    <div class="modalRight" v-if="modalFlagRight" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlagRight = false"></div>
      <div class="dialog">
        <div class="tip-name">{{local.supplier}}:</div>
        <input @click="supplierHandler()" v-model="mydata.name" :placeholder="local.choose" />
        <div class="tip-name">{{local.selectTime}}:</div>
        <picker
          class="weui-btn"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChange"
        >
          <input disabled v-model="startTimeFormat" />
        </picker>
        <div class="tip-name">-</div>
        <picker
          class="weui-btn"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChangeEnd"
        >
          <input disabled v-model="endTimeFormat" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeDialogRight">{{local.cancel}}</div>
          <div class="confirm-btn" @click="searchBytip()">{{local.confirm}}</div>
        </div>
      </div>
    </div>

    <!-- 业务通知 -->
    <div class="modalRight" v-if="modalFlagRight1" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlagRight1 = false"></div>
      <div class="dialog">
        <!-- 业务员需要实现多选 -->
        <div class="tip-name jt_flex jt_flex_row_bettwen" style="width: 100%">
          <div class="jt_flex">{{local.salesman}}:</div>
          <div class="jt_flex" @click="cancelHandler">{{local.clear}}{{local.salesman}}</div>
        </div>
        <picker
          class="weui-btn"
          :value="indexSalesmanPicker"
          :range="arraySalesman"
          :range-key="'userName'"
          @change="salesManChange"
        >
          <textarea v-model="salesManName" class="sales-text" disabled></textarea>
        </picker>
        <div class="tip-name">{{local.goodsName}}:</div>
        <input @click="goodsHandler()" v-model="selectGoodsItem.goodsName" />
        <div class="tip-name">{{local.selectTime}}:</div>
        <picker
          class="weui-btn"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="busDateChange"
        >
          <input disabled v-model="busDate" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeBusinessDialog()">{{local.deletesingle}}</div>
          <div class="confirm-btn" @click="addInform('business')">{{local.confirm}}</div>
        </div>
      </div>
    </div>

    <!-- 到货通知 -->
    <div class="modalRight" v-if="modalFlagRight2" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlagRight2 = false"></div>
      <div class="dialog">
        <div class="tip-name">{{local.selectSupplier}}:</div>
        <input @click="supplierHandler()" v-model="mydata.name" />
        <div class="tip-name">{{local.selectTime}}:</div>
        <picker
          class="weui-btn"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="busDateChange"
        >
          <input disabled v-model="busDate" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeGoodsDialog()">{{local.deletesingle}}</div>
          <div class="confirm-btn" @click="addInform('goods')">{{local.confirm}}</div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-bar">
      <div class="save-draft" @click="openBusinessDialog()">业务通知</div>
      <button class="confirm" style="font-size: 26rpx;" @click="openGoodsDialog()">到货通知</button>
    </div>
  </div>
</template>
<script>
import { formatTime } from "@/utils/index"
import card from "@/components/card"
import home from "@/api/home"
import headerBar from "@/components/headerBar"
import { formatDate } from "@/utils/index"
export default {
  components: {
    card,
    headerBar,
  },
  onShow() {
    this.initLang()
    this.initMyData()
  },
  computed: {
    startTimeFormat(){
      return this.startTime ? wx.$timeFormat(this.startTime) : '' //new Date(this.startTime).$format('dd/MM/yyyy') : ''
    },
    endTimeFormat(){
      return this.endTime ? wx.$timeFormat(this.endTime) : ''//new Date(this.endTime).$format('dd/MM/yyyy') : ''
    }
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
    },
    cancelHandler() {
      this.indexSalesmanPicker = 0
      this.salesManName = ""
      this.userIds = []
      this.userId = ""
      this.names = []
    },
    // 获取业务员
    async getCarUser() {
      const { rows } = await home.getCarUser()
      this.arraySalesman = rows
    },
    initMyData() {
      var pages = getCurrentPages()
      var currPage = pages[pages.length - 1]
      let myData = currPage.data.mydata
      if (myData && myData.selectGoodsItem) {
        //选择商品
        this.selectGoodsItem = myData.selectGoodsItem
      } else {
        //选择供应商
        this.mydata.id = myData ? myData.id : ""
        this.mydata.name = myData ? myData.name : ""
      }
    },
    supplierHandler() {
      // 跳转到 供应商列表
      wx.navigateTo({
        url: `../../pages/selectSupplier/index?name=supplier`,
      })
    },
    goodsHandler() {
      // 跳转到 商品列表
      wx.navigateTo({
        url: `../../pages/selectGoods/index?name=goods`,
      })
    },
    salesManChange(e) {
      this.names.push(this.arraySalesman[e.mp.detail.value].userName)
      this.userIds.push(this.arraySalesman[e.mp.detail.value].userId)
      this.salesMan = e.mp.detail.value
      this.salesManName = this.names.join()
      this.userId = this.userIds.join()
    },
    busDateChange(e) {
      this.busDate = e.mp.detail.value
    },
    DateChange(e) {
      this.startTime = e.mp.detail.value
    },
    DateChangeEnd(e) {
      this.endTime = e.mp.detail.value
    },
    changeLan(val) {
      this.local = val
    },
    pageReturn() {
      this.activeIndex = 0
    },
    openDialogRight() {
      this.modalFlagRight = true
      this.modalFlagRight1 = false
      this.modalFlagRight2 = false
    },
    closeDialogRight() {
      this.modalFlagRight = false
    },
    openBusinessDialog() {
      this.modalFlagRight1 = true
      this.modalFlagRight2 = false
      this.modalFlagRight = false
    },
    closeBusinessDialog() {
      this.modalFlagRight1 = false
    },
    openGoodsDialog() {
      this.modalFlagRight2 = true
      this.modalFlagRight = false
      this.modalFlagRight1 = false
    },
    closeGoodsDialog() {
      this.modalFlagRight2 = false
    },
    //确认之前加必填判断
    async addInform(type) {
      let idParams =
        type == "business"
          ? { userId: this.userId,goodsName:this.selectGoodsItem.goodsName }
          : { supplierId: this.mydata.id } //业务通知传 userId,goodsName,到货通知传 supplierId
      let remark =
        type == "business"
          ? `您好，产品名称：【${
              this.selectGoodsItem.goodsName
            }】，已经流转你处，请关注，感谢您的耐心等待；`
          : `你好,你的产品预计到货信息如下：供应商【${
              this.mydata.name
            }】商品已经到货，请注意查收。感谢您的耐心等待！`
      let obj = {
        messageType: type == "business" ? 2 : 1, //业务通知2，到货通知1
        sourceType: 2, //小程序2
        remark: remark,
        ...idParams,
        busDate: this.busDate,
      }
      const data = await home.addInform(obj)
      this.modalFlagRight = false
      this.modalFlagRight1 = false
      this.modalFlagRight2 = false
      this.mydata = {}
      this.selectGoodsItem = {}
      this.busDate = ""
      wx.showToast({
        title: data.msg,
        duration: 2000,
        icon: "none",
      })
    },
    async searchBytip() {
      // 这里面是查询, 供应商选择需要跳转到新的客户选择
      const { rows, code } = await home.getCustomerInform({
        "params[startTime]": this.startTime,
        "params[endTime]": this.endTime,
      })
      this.msgList = rows
      this.msgList.map(item => {
        item.remark = this.GetChinese(item.remark)
      })
      this.activeIndex = 0
      if (code == 0) {
        this.modalFlagRight = false
      }
      if (this.msgList.length == 0) {
        // block
        this.isBlock = true
      } else {
        this.isBlock = false
      }
    },
    tabClick(e) {
      this.activeIndex = Number(e.currentTarget.id)
      if (this.activeIndex == 0) {
        this.getCustomerInform()
      } else if (this.activeIndex == 1) {
        this.getCustomerInform0()
      } else if (this.activeIndex == 2) {
        this.getCustomerInform1()
      }
    },
    routerToUrl(url) {
      wx.navigateTo({
        url,
      })
    },
    async getCustomerInform() {
      const { rows } = await home.getCustomerInform()
      this.msgList = rows
      this.msgList.map(item => {
        item.remark = this.GetChinese(item.remark)
      })
      if (this.msgList.length == 0) {
        // block
        this.isBlock = true
      } else {
        this.isBlock = false
      }
    },
    async getCustomerInform0() {
      const { rows } = await home.getCustomerInform({ type: 0 })
      this.msgList = rows
      this.msgList.map(item => {
        item.remark = this.GetChinese(item.remark)
      })
      if (this.msgList.length == 0) {
        // block
        this.isBlock = true
      } else {
        this.isBlock = false
      }
    },
    async getCustomerInform1() {
      const { rows } = await home.getCustomerInform({ type: 1 })
      this.msgList = rows
      this.msgList.map(item => {
        item.remark = this.GetChinese(item.remark)
      })
      if (this.msgList.length == 0) {
        // block
        this.isBlock = true
      } else {
        this.isBlock = false
      }
    },
    // 只提取汉字
    GetChinese(strValue) {
      // eslint-disable-line
      if (strValue !== null && strValue !== "") {
        const reg = /[\u4e00-\u9fa5]/g
        return strValue.match(reg).join("")
      }
      return ""
    },
    format(str) {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var date = now.getDate()
      // 根据参数所传递的时间格式来进行具体的操作
      if (str == "yyyy-mm-dd") {
        return year + "-" + month + "-" + date
      } else if (str == "mm/dd/yyyy") {
        return month + "/" + date + "/" + year
      }
    },
  },
  data() {
    return {
      arraySalesman: [],
      salesMan: "",
      salesManName: "",
      names: [],
      userIds: [],
      userId: "",
      busDate: "",
      mydata: {
        id: "",
        name: "",
      },
      selectGoodsItem: {},
      modalFlagRight2: false,
      modalFlagRight1: false,
      startTime: "",
      endTime: "",
      modalFlagRight: false,
      isBlock: false,
      pdt: 66,
      local: wx.getStorageSync("local"),
      activeIndex: 0,
      logs: [],
      msgList: [],
      msgListNoRead: [],
      msgListRead: [],
    }
  },

  created() {},
  onLoad() {
    this.initLang()
    var myDate = new Date()
    this.startTime = formatDate(myDate, "YYYY-MM-DD")
    this.endTime = formatDate(myDate, "YYYY-MM-DD")
    this.busDate = formatDate(myDate, "YYYY-MM-DD")
    this.getCustomerInform()
    this.getCarUser()
    this.pdt = this.globalData.CustomBar
  },
}
</script>

<style scoped lang="scss">
@import 'index';
page,
.page,
.page__bd {
  height: 100%;
}
.page__bd {
  padding-bottom: 0;
}
.weui-navbar__title {
  display: block;
}
.weui-tab__content {
  padding-top: 60px;
  text-align: center;
}
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
